<div id="app">
    <admin-page-header back>
        <bi-button icon="fa-save" @click="save" type="primary">保存</bi-button>
    </admin-page-header>


    <div class="container">
        <bi-form ref="form">
            <div class="row g-2">
                <div class="col-12">
                    <bi-card title="商品信息">

                        <template #action>
                            <bi-icon data="fa-gear" class="tool"  :class="{checked:setting}" @click="setting = !setting" ></bi-icon>
                        </template>

                        <bi-form-item label="标题">
                            <bi-input v-model="form.title"  placeholder="请输入标题" required>
                            </bi-input>
                        </bi-form-item>

                        <bi-form-item label="分类">
                            <shop-cate v-model="form.cate_id" required @change="cateChange"></shop-cate>
                        </bi-form-item>

                        <bi-form-item label="图片" >
                            <bi-file multiple image :max="5"  v-model="form.picture"  required @change="" preview-type="square"   ></bi-file>
                        </bi-form-item> 
                        <bi-form-item label="标签">
                            <goods-tag v-model="form.tag" placeholder="请选择标签"></goods-tag>
                        </bi-form-item>
                        <bi-form-item label="型号模板">
                            <goods-variant v-model="form.variant_id"  placeholder="请选择型号模板" ></goods-variant>
                        </bi-form-item>
                        
                        <bi-form-item label="模型" v-show="setting" >
                            <shop-model v-model="goods_model_id" type="goods"></shop-model>
                        </bi-form-item>
                        
                        <bi-form-item label="规格" v-show="setting">
                            <shop-spec v-model="goods_spec_id" ></shop-spec>
                        </bi-form-item>
                    </bi-card>
                </div>

                <div class="col-12" v-if="form.variant_id">
                    <bi-card title="商品规格">
                        <goods-sku ref="sku" :variant="form.variant_id" :param="form.sku_param" :sku="$pageData.sku"  ></goods-sku>
                    </bi-card>
                </div>

                <div class="col-12" v-else>
                    <bi-card title="销售参数">
                        <bi-form-item label="价格">
                            <bi-input v-model="form.price" type="number"  placeholder="请输入价格" required>
                            </bi-input>
                        </bi-form-item>
                        <bi-form-item label="库存">
                            <bi-input v-model="form.stock"  type="number"   placeholder="请输入库存" required>
                            </bi-input>
                        </bi-form-item>
                        <bi-form-item label="重量">
                            <bi-input v-model="form.weight" type="number"  placeholder="请输入重量">
                            </bi-input>
                        </bi-form-item>
                        <bi-form-item label="条形码">
                            <bi-input v-model="form.barcode" placeholder="请输入条形码" required>
                            </bi-input>
                        </bi-form-item>
                    </bi-card>
                </div>

                <div class="col-12" >
                    <bi-card title="">
                        <bi-tab >
                            <bi-tab-item label="商品内容">
                                <admin-editor v-model="form.content"></admin-editor>
                            </bi-tab-item>
                            <bi-tab-item label="参数" :show="model_id!=''">
                                <shop-model-param ref="param" :model="model_id" :data="model_value"></shop-model-param>
                            </bi-tab-item>
                            <bi-tab-item label="说明书" :show="spec_id!=''">
                                <spec-item ref="spec" :spec="spec_id" :data="form.spec_data"></spec-item>
                            </bi-tab-item>
                        </bi-tab>
                        <template #footer>
                            <bi-button icon="fa-save" type="primary" @click="save">保存</bi-button>
                        </template>
                    </bi-card>
                </div>
            </div>
        </bi-form>
    </div>
</div>


<script>
    import shopCate from 'field/cate.vue';
    import shopModel from 'field/model.vue';
    import shopSpec from 'field/spec.vue';
    import specItem from 'field/spec-item.vue';
    import MemberLevelPrice from 'field/member-level-price.vue';
    import shopModelParam from 'field/model-param.vue';
    import goodsVariant from 'field/variant.vue';
    import goodsTag from 'field/goods-tag.vue';
    import goodsSku from 'goods/goods-sku.vue';
    let app = admin.createApp({
        components: {
            shopCate,
            shopModel,
            shopSpec,
            shopModelParam,
            specItem,
            goodsVariant,
            MemberLevelPrice,
            goodsTag,
            goodsSku
        },
        data() {

            let form = {
                goods_id: '',
                title: '',
                cate_id: '',
                url: '',
                model_id: '',
                content: '',
                stock:0,
                price:0,
                barcode:'',
                weight:'',
                spec_id:'',
                picture:'',
                tag:'',
                spec_data:{},
                updated_at: '',
                variant_id:'',
                sku:[],
                sku_param:[],
            }

            
            let cate_model_id = '';
            let goods_model_id = '';

            let cate_spec_id = '';
            let goods_spec_id = '';
             

            let model_value = {};
            this.$assign(form, this.$pageData.goods);
            if (this.$pageData.model_value) model_value = this.$pageData.model_value;

            if (this.$pageData.goods) {
                goods_model_id = form.model_id;
            }


            return {
                goods_model_id,
                cate_model_id,
                cate_spec_id,
                goods_spec_id,
                form,
                model_value,
                setting: this.$user.getLocalStorage('shop-goods-setting'),
            }
        },
        watch: {
            goods_model_id: {
                handler(value) {
                    this.form.model_id = this.goods_model_id;
                }
            },
            goods_spec_id: {
                handler(value) {
                    this.form.spec_id = this.goods_spec_id;
                }
            },
            setting:{
                handler(value) {
                    this.$user.setLocalStorage('shop-goods-setting', value);
                }
            }
        },
        computed: {
            model_id: {
                get() {
                    if (this.goods_model_id != '' && this.goods_model_id != null) {
                        return this.goods_model_id;
                    }

                    if (this.cate_model_id != '' && this.cate_model_id != null) {
                        return this.cate_model_id;
                    }

                    return '';
                }
            },
            spec_id: {
                get() {
                    if (this.goods_spec_id != '' && this.goods_spec_id != null) {
                        return this.goods_spec_id;
                    }

                    if (this.cate_spec_id != '' && this.cate_spec_id != null) {
                        return this.cate_spec_id;
                    }

                    return '';
                }
            }
        },
        methods: {
            save() {

                if (this.$refs.form.check()) {

                    let  data = {...this.form};

                    if (!this.$refs.param || !this.$refs.param.check()){
                        console.log('param error');
                        return;
                    }else{
                        data.model_value = this.$refs.param.getData();
                    }

                    if (!this.$refs.spec || !this.$refs.spec.check()) {
                        console.log('spec error');
                        return;
                    }else{
                        data.spec = this.$refs.spec.getData();
                    }

                    if (this.form.variant_id != ''){
                        if (this.$refs.sku.check()){
                            let v= this.$refs.sku.getData();
                            data.sku_param = v.sku_param;
                            data.sku = v.sku;
                        }else{
                            return;
                        }
                    }

                    this.$ajax({
                        url: this.$url({ action: 'save' }),
                        data,
                        success: (res) => {
                            //this.$toast('保持成功');
                            this.$go(-1);
                        }
                    });
 
                }
            },
            cateChange(cate) { 
                if (cate) {
                    this.cate_model_id = cate.goods_model_id;
                    this.cate_spec_id = cate.goods_spec_id;
                } else {
                    this.cate_model_id = '';
                    this.cate_spec_id = '';
                }
            }
        }

    }).mount('#app');
</script>


<style>
.tool{
    margin-left: 10px;
    color: var(--bs-gray-700);
    cursor: pointer;
}
.tool:hover{
    color: var(--bs-gray-900);
}

.tool.checked{
    color: var(--bs-primary);
}

</style>